<template>
  <div class="w-80 h-80 m-2 p-2 rounded-2xl flex flex-col">
<!--  视频封面  -->
    <div @click="router.push({name:'videoPlay', query:{videoId:id}})" class="bg-black w-full h-48 rounded-2xl overflow-hidden cursor-pointer">
  <!--  封面图片  -->
      <img :src="cover">
    </div>
<!--  视频描述及作者信息  -->
    <div class="m-2 grow flex">
  <!--  左侧-作者头像  -->
      <div class="w-1/6 h-full flex flex-col items-center">
    <!--  头像  -->
        <div class="w-full aspect-square rounded-full overflow-hidden">
          <img src="http://localhost:3000/videoCover/hi.jpg">
        </div>
        <span class="text-xs cursor-pointer">{{creator}}</span>
      </div>
  <!--  右侧-视频描述和播放次数  -->
      <div class="w-5/6 h-full px-3 py-1">
    <!--  视频描述  -->
        <div @click="router.push({name:'videoPlay', query:{videoId:id}})" class="cursor-pointer">
          <span>{{title}}</span>
        </div>
    <!--  播放次数以及时间  -->
        <div></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps} from "@vue/runtime-core";
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps(["cover","title","creator","id"])

</script>

<style scoped>

</style>
